<!-- 我的足迹界面 -->
<template>
	<view>
		<!-- 白屏展位 -->
		<u-loading-page :loading="loading" image="/static/logo.png"></u-loading-page>
		<!-- 基于 uni-list 的页面布局 -->
		<uni-list>
			<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
			<uni-list-item direction="column" v-for="(item,index) in indexList" :key="index"
				:note="item.news_author + ' '+item.release_time"
				:to="'/pages/home/detail/detail?titleId='+item.news_id">
				<!-- 通过header插槽定义列表顶部显示为图片 -->
				<template v-slot:header>
					<view class="uni-title">{{item.news_title}}</view>
					<view class="uni-thumb uni-content list-picture">
						<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
						<image :src="item.news_cover" mode="aspectFill"></image>
					</view>
				</template>
			</uni-list-item>
			<u-gap v-if="!loading" height="10" bgColor="#ffffff"></u-gap>
			<u-loadmore v-if="!loading" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" />
			<u-gap v-if="!loading" height="20" bgColor="#ffffff"></u-gap>
		</uni-list>
	</view>
</template>

<script>
	import api from "@/common/api/api.js"
	export default {
		components: {},
		data() {
			return {
				indexList: [],
				loading: false,
				status: 'nomore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			};
		},
		// 加载页面数据
		async onLoad(e) {

			this.loading = true
			this.status = "loading"
			let newData = await api("/recent_views/recent_views_selectByUserId?user_id=" + uni.getStorageSync(
				"openid"))
			console.log(newData.data)
			newData.data.map(async (item) => {
				let itemData = await api("/news/news_selectByNewsId?news_id=" + item.news_id)
				this.indexList.push(itemData.data)
			})
			this.loading = false
			setTimeout(() => {
				this.status = "nomore"
			}, 6000)
			console.log(this.indexList)

		},
		methods: {

		},
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>